<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>对象解构</title>
</head>

<body>
  <script type="text/javascript">
    // // --------------情况1，默认要求变量名和属性名一样---------------
    // let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
    // console.log(foo, bar); // aaa, bbb

    // let { a, c } = { a: 'hello', b: 'world' };
    // console.log(a, c); // hello, undefined


    // -------------------情况2，可以通过:为变量改名-----------------
    // let { a, b: c } = { a: 'hello', b: 'world' };//用b属性匹配对象中的world再赋值给c
    // console.log(a, c); // hello, world 


    //------- 情况3，变量名和属性名一致即可获取到值，不一定要一一对应--------
    // let { b } = { a: 'hello', b: 'world' };
    // console.log(b); // world
    // // 此时，没有定义变量a，所以使用a会报错


    // ------------------情况4，剩余值-------------------
    // let obj = { name: 'zs', age: 20, gender: '男' };
    // let { name, ...a } = obj;
    // console.log(name, a);
    // // 结果：
    // // name = zs
    // // a = {age: 20, gender: "男"};


    //--------------- 情况5，复杂的情况，只要符合模式，即可解构---------
    let obj = {
      name: 'zhangsan',
      age: 22,
      dog: {
        name: '毛毛',
        age: 3
      }
    };
    let { dog: { name, age } } = obj;
    console.log(name, age); // 毛毛 3
  </script>
</body>

</html>